@extends('web.layout')

@section('content')
  <div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
      <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title">
          <li><a href="{{ url('/login') }}">登录</a></li>
          <li class="layui-this">注册</li>
        </ul>
        <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
          <div class="layui-tab-item layui-show">
            <div class="layui-form layui-form-pane">
              <form method="post" action="{{ url('/register') }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="layui-form-item">
                  <label for="L_mobile" class="layui-form-label"><span class="star-red">*</span> 手机号</label>
                  <div class="layui-input-inline">
                    <input type="text" id="L_mobile" name="mobile" required lay-verify="required|phone" lay-reqtext="请输入手机号" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid layui-word-aux">将会成为您唯一的登录名</div>
                </div>
                <div class="layui-form-item">
                  <label for="L_username" class="layui-form-label"><span class="star-red">*</span> 验证码</label>
                  <div class="layui-input-inline">
                    <input type="text" id="L_username" name="code" required lay-verify="required" lay-reqtext="请输入短信验证码" placeholder="请输入短信验证码" autocomplete="off"
                           class="layui-input">

                  </div>
                  <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-primary sendSms">获取短信验证码</button>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label for="L_password" class="layui-form-label"><span class="star-red">*</span> 密码</label>
                  <div class="layui-input-inline">
                    <input type="password" id="L_password" name="password" required lay-verify="required" lay-reqtext="请输入密码" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                  </div>
                  <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                </div>
                <div class="layui-form-item">
                  <label for="L_password_confirmation" class="layui-form-label"><span class="star-red">*</span> 确认密码</label>
                  <div class="layui-input-inline">
                    <input type="password" id="L_password_confirmation" name="password_confirmation" required lay-verify="required" lay-reqtext="请输入确认密码" placeholder="请输入确认密码" autocomplete="off"
                           class="layui-input">
                  </div>
                </div>
{{--                <div class="layui-form-item">--}}
{{--                  <label for="L_union_name" class="layui-form-label"><span class="star-red">*</span> 联盟名称</label>--}}
{{--                  <div class="layui-input-inline">--}}
{{--                    <input type="text" id="L_union_name" name="union_name" required lay-verify="required" lay-reqtext="请输入联盟名称" placeholder="请输入联盟名称" autocomplete="off" class="layui-input">--}}
{{--                  </div>--}}
{{--                </div>--}}
{{--                <div class="layui-form-item">--}}
{{--                  <label for="L_union_desc" class="layui-form-label">联盟介绍</label>--}}
{{--                  <div class="layui-input-inline">--}}
{{--                    <input type="text" id="L_union_desc" name="union_desc" placeholder="请输入联盟介绍" autocomplete="off" class="layui-input">--}}
{{--                  </div>--}}
{{--                </div>--}}

                <div class="layui-form-item">
                  <button class="layui-btn" lay-filter="*" lay-submit>立即注册</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
<script>
  layui.use('form', function(){
    var table = layui.table
        ,$ = layui.$;

    $(document).on('click','.sendSms',function(obj){
       var that = $(this);
       var mobile = $.trim($("#L_mobile").val());
       var seconds = 60;
       var flag = true;   //设置点击标记，防止60内再次点击生效

       if(!mobile){
        layer.msg('请输入手机号', {icon: 5,shift: 6});
        $("#L_mobile").focus();
        return false;
       }
       that.attr("disabled", true);
       that.addClass("layui-btn-disabled");
       that.html(seconds+'秒后重新获取');
         let promise = new Promise((resolve, reject) => {
          let setTimer = setInterval(
            () => {

              if(seconds == 60 && flag){
                flag = false;

                $.ajax({
                    type : 'post',
                    async : false,
                    url : "{{ url('/sendSms') }}",
                    data : {
                        "mobile" : mobile
                    },
                    dataType:"json",
                    success : function(obj) {
                      console.log(obj)
                        if(obj.code == 0){
                            layer.msg(obj.msg);
                        }else {
                            layer.msg(obj.msg, {icon: 5,shift: 6});
                            that.html('获取短信验证码');
                            resolve(setTimer)
                            flag = true;
                        }
                    }
                });
              }else if(seconds <= 0){
                that.html('获取短信验证码');
                resolve(setTimer)
                flag = true;
              }else {
                seconds -= 1;
                // console.info('倒计时:' + seconds);
                that.html(seconds+'秒后重新获取');
              }
            }
            , 1000)
        });
        promise.then((setTimer) => {
          clearInterval(setTimer);
          that.attr("disabled", false);
          that.removeClass("layui-btn-disabled");
        })
    });

  });

</script>
@endsection